
<template>

  <div>
    <div class="brand"> <i class="personal-icon"></i> 个人中心 &gt; 我的车队 &gt; <span class="active">车队管理</span></div>
    <div class="personal-header">
      
      <div class="personal-header-info">
        <div class="person-img-border">
          <img :src="userInfo.avatar ? userInfo.avatar : '/static/images/person-logo.png'" />
        </div>
        <div class="info">
          <div>- {{ userInfo.nickName || '暂无' }} <span>ID：{{userInfo.id}}</span></div>
          <div class="meta">车队介绍</div>
        </div>
        <div class="edit">
          <img src="/static/images/edit.png">
          <span >修改信息</span>
        </div>
      </div>
    </div>
    <div class="m-page wrapper">
	<div class="m-page-box">
		<div class="m-page-left" style="height: 448px;">
			<div class="nav">
				<ul>
          <li></li>
          <router-link tag="li" active-class="active" :to="link.path" v-for="link, index in links" :key="index"><a>{{link.name}}</a></router-link>
				</ul>
			</div>
		</div>
    <router-view></router-view>
	</div>
	<div style="clear:both"></div>
</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      links: [
        {
          path: `/mc_manager/${this.$route.params.id}/info`, name: '车队概况', ico: 'menu-my-ico'
        },
        // {
        //   path: '/mc_manager/competition', name: '赛事报名', ico: 'menu-yuyue-ico'
        // },
        {
          path: `/mc_manager/${this.$route.params.id}/user`, name: '人员管理', ico: 'menu-file-ico'
        },
        {
          path: `/mc_manager/${this.$route.params.id}/apply`, name: '队员申请', ico: 'menu-car-ico'
        },
      ]
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'getUserInfo'
    })
  }
};
</script>

<style scoped>
.personal-header {
  width: 1210px;
  margin: 0px auto 32px;
  padding: 0 52px;
  border-radius: 5px;
  background-color: rgb(255, 255, 255);
  box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.2);
}
.personal-header .meta {
  font-size: 16px;
  color: #7d7d7d;
}
.person-img-border {
  background: url("/static/images/person-border.png") no-repeat transparent;
  background-size: cover;
  width: 98px;
  height: 98px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-20px);
}
.personal-header-info {
  display: flex;
}
.personal-header-info .info {
  flex: 1;
  margin-left: 24px;
}
.info div {
  color: #313131;
  font-size: 20px;
  margin: 15px 0;
}
.info div span {
  font-size: 16px;
  color: #7d7d7d;
}
.person-img-border img {
  max-width: 96px;
  max-height: 96px;
  border-radius: 50%;
}
.person-tag {
  border-radius: 8px;
  height: 18px;
  font-size: 12px;
  color: #fff;
  padding: 0 6px;
  margin-right: 5px;
}
.tag-status {
  background-color: #ffbd01;
}
.tag-zhiwu1 {
  background-color: #ff25ff;
}
.tag-zhiwu2 {
  background-color: #f83b39;
}
.edit {
  font-size: 15px;
  color: #7d7d7d;
  line-height: 75px;
}
.edit span {
  vertical-align: middle;
}
.edit img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 4px;
}
.perosn-menu-icon {
  background: url("/static/images/menu-ico.png") no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-position-y: 6px;
}
.menu-my-ico {
  background-position-x: 0px;
}
.menu-yuyue-ico {
  background-position-x: -23px;
}
.menu-file-ico {
  background-position-x: -46px;
}
.menu-car-ico {
  background-position-x: -66px;
}
.personal-menu {
  display: flex;
  width: 604px;
  height: 36px;
  margin-top: 10px;
  justify-content: space-around;
}
.personal-menu li {
  width: 108px;
  height: 36px;
  line-height: 36px;
  cursor: pointer;
}
.personal-menu li.active {
  background-color: #0143a0;
  color: #fff;
  font-size: 15px;
  border-radius: 5px;
  padding-left: 14px;
}
.personal-menu li.active .perosn-menu-icon {
  background-position-y: -15px;
}
.wrapper {
    margin: 0 auto;
    width: 1210px;
    padding: 20px 0;
  }
  .m-page-box {
    margin-left: -2px;
    margin-right: -2px;
    height: auto;
    padding-bottom: 3px;
    padding-top: 3px;
}
.m-page-left {
    width: 140px;
}
.m-page-left {
  box-shadow: 2.5px 4.33px 10px 0px rgba( 0, 0, 0, 0.2 );

    width: 185px;
    background: #fff;
    border-radius: 5px;
    float: left;
    margin-left: 2px;
}
.m-page-left .nav {
    margin-top: 15px;
}
.m-page-left .nav li {
    line-height: 45px;
}
.m-page-left .nav li {
    line-height: 55px;
    position: relative;
    margin-bottom: 1px;
    color: #666;
}
.m-page-left .nav li.active, .m-page-left .nav li:hover {
    background: #E8F0FC;
}
.m-page-left .nav li.active, .m-page-left .nav li:hover {
    background: #e5edfa;
}
.m-page-left .nav li a {
    font-size: 14px;
    padding-left: 49px;
    text-decoration: none;
}
.m-page-left .nav li a {
    color: #959595;
    display: block;
    padding-left: 40px;
}
.m-page-left .nav li.active:before, .m-page-left .nav li:hover:before {
    visibility: visible;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.m-page-left .nav li:before {
    left: 38px;
    width: 5px;
    height: 21px;
    display: block;
    top: 50%;
    margin-top: -2.5px;
    border-radius: 2px;
    background: #0143A0;


}
.m-page-left .nav li:before {
    position: absolute;
    left: 2px;
    height: 21px;
    top: 50%;
    margin-top: -8px;
    width: 3px;
    content: "";
    background: #5687f1;
    visibility: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
.m-page-left .nav li.active a, .m-page-left .nav li:hover a {
    color: #0143A0;
}
.brand {
  
  color: #aba9a0;
  font-size: 14px;
  height: 66px;
  line-height: 66px;
  width: 1210px;
  margin: 40px auto 22px;
}
.brand .active {
  color: #0143a0;
}
.personal-icon {
  background: url("/static/images/menu-ico.png") no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-position: 0 6px;
}
</style>